Форум

CrazyBite · #1 (**permalink**) 22.10.2013, 09:24

Всем привет! Помогите пожалуйста, делаю автокомплит. Работает, но очень криво, при первом нажатии, данные ПОСТом забираются, но сам автокомплит не срабатывает, если нажимаем второй раз, то он работает нормально. Если удалить второй символ (вернуться к первому) то все работает как надо. Как сделать что бы все работало с 1 ого нажатия?

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />	
<!DOCTYPE HTML>
<html>  
<head >
</head>  
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body >

<form action ='auto.php' method='post'>
<input id="kks" name='kks'/>
<input id="id" name='id' hidden='true'/>
<input id="table" name='table' hidden='true'/>
<input type='submit'>
</form>

$(document).ready(function() {    
	$("#kks").keyup(function(){
		var word = document.getElementById("kks").value;
		$.post("maker.php?make=showkksbymywords",{"word":word},function(data){		
			if (data!=="nodata"){
				var lines = data.split("@");
				var kks = new Array();
				for (var i = 0;i<lines.length;i++){
					var tags = lines[i].split(":");
					kks[i] = tags[0];
				}
				$("#kks").autocomplete({
					source: lines,
					select: function (event, ui) {
						var str = ui.item.value.split(":");
						document.getElementById("kks").value = str[0];
						document.getElementById("id").value = str[1];
						document.getElementById("table").value = str[2];
						return false;
					}
					
				}).data("ui-autocomplete")._renderItem = function (ul, item) {
					var items = item.value.split(":")
					var kks = items[0];
					var id = items[1];
					var table = items[2];
					return $( "<li>" )
					.data("ui-autocomplete-item", kks )
					.append( "<a>" + kks + " в <font color='red'>"+get_dbname(table)+"</font></a>" )
					.appendTo( ul );
				};
			}
		});
	});
});
function get_dbname(name){
	return "unknow"
}

Яростный Меч · #2 (**permalink**) 22.10.2013, 13:28

зачем ты вручную обрабатываешь keyup?
autocomplete этим сам должен заниматься - обрабатывать нажатие клавиш, делать запрос на сервер, получать данные и подставлять их в плашку.

можно переопределить select: function (event, ui) для обработки выбора пользователя, _renderItem для отрисовки.
если необходимо, то и запрос можно самостоятельно делать - если для source указать функцию.

то что сделано в примере - это образец того, как не надо делать. Кури документацию, см. примеры, там все проще чем кажется на первый взгляд.

CrazyBite · #3 (**permalink**) 22.10.2013, 14:35

Спасибо! Переделал вот так:

$(document).ready(function(){    	
	$("#kks").autocomplete({
		source: "maker.php?make=showkksbymywords",
		select: function (event, ui) {
			var str = ui.item.value.split(":");
			document.getElementById("kks").value = str[0];
			document.getElementById("id").value = str[1];
			document.getElementById("table").value = str[2];
			return false;
		}
	}).data("ui-autocomplete")._renderItem = function (ul, item) {
		var items = item.value.split(":")
		var kks = items[0];
		var id = items[1];
		var table = items[2];
		return $( "<li>" )
		.data("ui-autocomplete-item", kks )
		.append( "<a>" + kks + " в <font color='red'>"+get_dbname(table)+"</font></a>" )
		.appendTo( ul );
	};
});

Основная проблема была с JSON, но php json_encode все сделал сам )

CrazyBite · #4 (**permalink**) 22.10.2013, 17:04

Появилась новая проблема. Автокомплит рендерит меню только для первого элемента, для последующих отказывается. ЧТо нужно сделать что бы он рендерил все элементы с определенным классом?
Код:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />	
<!DOCTYPE HTML>
<html>  
<head >
</head>  
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body >

<form action ='auto.php' method='post'>
<input class="kks" id='kks' name='kks'/>
<input class="kks" id='kks' name='kks'/>
<input id="id" name='id' hidden='true'/>
<input id="table" name='table' hidden='true'/>
<input type='submit'>
</form>

<script>
$(document).ready(function(){    	
	$(".kks").autocomplete({
		source: "maker.php?make=showkksbymywords",
		select: function (event, ui) {
			var str = ui.item.value.split(":");
			document.getElementById("kks").value = str[0];
			document.getElementById("id").value = str[1];
			document.getElementById("table").value = str[2];
			return false;
		}
	}).data("ui-autocomplete")._renderItem = function (ul, item) {
		var items = item.value.split(":")
		var kks = items[0];
		var id = items[1];
		var table = items[2];
		return $( "<li>" )
		.data("ui-autocomplete-item", kks )
		.append( "<a>" + kks + " в <font color='red'>"+get_dbname(table)+"</font></a>" )
		.appendTo( ul );
	};
});
function get_dbname(name){
	return "unknow"
}
</script>

JSON :["00CXQ01GH201:1:db_pts","00CXQ01GH201:2:db_pts","0 0GKC01CP001:7:db_controlpoint"]

Выплевывает UL:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; top: 52px; left: 10px; width: 326px;"><li class="ui-menu-item" role="presentation"><a id="ui-id-12" class="ui-corner-all" tabindex="-1">00CXQ01GH201 в <font color="red">unknow</font></a></li><li class="ui-menu-item" role="presentation"><a id="ui-id-13" class="ui-corner-all" tabindex="-1">00CXQ01GH201 в <font color="red">unknow</font></a></li><li class="ui-menu-item" role="presentation"><a id="ui-id-14" class="ui-corner-all" tabindex="-1">00GKC01CP001 в <font color="red">unknow</font></a></li></ul>
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-2" tabindex="0" style="display: none; top: 52px; left: 171px; width: 322px;"><li class="ui-menu-item" role="presentation"><a id="ui-id-9" class="ui-corner-all" tabindex="-1">00CXQ01GH201:1:db_pts</a></li><li class="ui-menu-item" role="presentation"><a id="ui-id-10" class="ui-corner-all" tabindex="-1">00CXQ01GH201:2:db_pts</a></li><li class="ui-menu-item" role="presentation"><a id="ui-id-11" class="ui-corner-all" tabindex="-1">00GKC01CP001:7:db_controlpoint</a></li></ul>

Во втором ul он не пытается рендерить менюшку, выплевывает то, что ему дал JSON.
Как заставить обрабатывать все инпуты с классом kks?

CrazyBite · #5 (**permalink**) 23.10.2013, 10:21

Вопрос снят, извините за беспокойство.

Форум

Справочник

Discord чат

Курсы javascript